import React, {Component} from 'react'
import Taro from '@tarojs/taro'

import {View, Image} from '@tarojs/components'
import {AtAvatar, AtIcon} from "taro-ui";
import {formatTime} from '../../../utils/tool'
import {delDy} from '../../../service/dynamic'
import Like from "./like";
import './index.scss'

type PageStateProps = {
  dataList: {}
  ID: '',
  del:()=>{}
}

type PageDispatchProps = {}

type PageOwnProps = {}

type PageState = {
  commentList: {},
  userID: string,
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface MyPicker {
  props: IProps;
}

class MyPicker extends Component<IProps, PageState> {
  constructor(props) {
    super(props);
    this.state = {
      commentList: {},
      userID: ''
    }
  }

  componentDidMount() {
  }

  componentWillReceiveProps() {
    this.setState({
      commentList: this.props.dataList,
      userID: this.props.ID
    })
  }


  handleClickNavToPage = (id:number,uID:number) => {
    Taro.navigateTo({
      url: `/pages/detail-comment/index?id=${id}&uID=${uID}`,
    })
  }


  // 图片预览
  handlePreviewImage(imgList, i) {
    Taro.previewImage({
      current: imgList[i], //所有图片 需要预览的图片链接列表
      urls: imgList  //当前显示图片的链接
    })
  }

  //删除动态
  handleDelDY = async (ID, e) => {

    e.stopPropagation()
    Taro.showModal({
      title: '提示',
      content: '是否删除该动态？',
      success: async (res) => {
        if(res.confirm){
            let param = {
              id: ID
            }
            const data = await delDy(param)
          if(data.code === 1){
            this.props.del()
          }
        }
      },
      fail: (err) => {
        console.log(err);
      }
    })

  }

  render() {
    let dataList = this.state.commentList
    let userID = this.state.userID
    return (
      <View className='tabBody'>
        {
          Object.keys(dataList).map(item => {

            let imgList =  []
            if(dataList[item].dy_img && dataList[item].dy_img.length !== 0) {
              imgList = JSON.parse(dataList[item].dy_img)
            }
            return (
              <View className='tabItem' key={dataList[item].id}>
                <View className='tabItem_title' onClick={this.handleClickNavToPage.bind(this,dataList[item].id,userID)}>
                  <View className='tabItem_title_left'><AtAvatar image={dataList[item].user_picture} /></View>
                  <View className='tabItem_title_center'>
                    <View className='tabItem_title_name'>{dataList[item].user_name}</View>
                    <View
                      className='tabItem_title_time'
                    >{formatTime(dataList[item].created_at)()}
                    {/*{Number(dataList[item].user_id) === Number(userID) ?*/}
                    {/*  <View className='dy_del'*/}
                    {/*    onClick={this.handleDelDY.bind(this, dataList[item].id)}*/}
                    {/*  >删除</View> : ''} */}
                    </View>
                  </View>
                  <View className='tabItem_title_right'><AtIcon value='chevron-right' size='26' color='#333' /></View>
                </View>
                <View className='tabItem_content'>{dataList[item].dy_content}</View>
                <View className='img_list'>
                  {
                    imgList.length !== 0 ?
                      imgList.map((url: string, i: number) =>
                        <View
                          onClick={this.handlePreviewImage.bind(this, imgList, i)}
                          className='img_list_item'
                          key={i}
                        ><Image
                          className='img_list_item_img'
                          src={url}
                          mode='aspectFill'
                        /></View>)
                      :
                      ''
                  }
                </View>
                <View className='tabItem_icon'>
                  <Like uID={userID} Data={dataList[item]} />
                  <View className='tabItem_icon_item' onClick={this.handleClickNavToPage.bind(this,dataList[item].id,userID)}>
                    <View className='tabItem_center'>
                      <AtIcon value='message' size='18' color='#333' />
                      <View className='tabItem_icon_text' >{dataList[item].dy_comment.length}</View>
                    </View>
                  </View>
                </View>
              </View>
            )
          })
        }
      </View>

    )
  }
}


export default MyPicker
